<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
    <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @click="goBack" />
    <text class="title">我要租房</text>
  </view>
  <scroll-view class="scroll-view" scroll-y>
    <view class="wrapper">
      <image src="http://xcxtp.njmswl.com/images/hire.png" class="hireImg" />
      <view class="content">
        <!-- 区域 -->
        <view class="contentItem">
          <label for="houseName" class="houseNameText">想住的区域</label>
          <input
            id="houseName"
            class="inputStyle"
            type="text"
            placeholder="请选择"
            placeholder-class="placeholderStyle"
            v-model="area"
          />
          <image src="http://xcxtp.njmswl.com/images/index/rightArrow.png" class="rightArrow" />
          <view class="line"></view>
        </view>
        <!-- 户型 -->
        <view class="contentItem">
          <label for="acceptType" class="houseNameText">想住的户型</label>
          <input
            id="acceptType"
            class="inputStyle"
            type="text"
            placeholder="请选择"
            placeholder-class="placeholderStyle"
            v-model="typy"
          />
          <image src="http://xcxtp.njmswl.com/images/index/rightArrow.png" class="rightArrow" />
          <view class="line"></view>
        </view>
        <!-- 价格 -->
        <view class="contentItem">
          <label for="acceptPrice" class="houseNameText">理想的价格</label>
          <input
            id="acceptPrice"
            class="inputStyle"
            type="text"
            placeholder="请输入"
            placeholder-class="placeholderStyle"
            v-model.number="acceptPrice"
          />
          <view class="unit">元/月</view>
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="personName" class="houseNameText">如何称呼您</label>
          <input
            id="personName"
            class="inputStyle"
            type="text"
            placeholder="请输入您的名字"
            placeholder-class="placeholderStyle"
            v-model="personName"
          />
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="personTel" class="houseNameText">联系方式</label>
          <input
            id="personTel"
            class="inputStyle"
            type="text"
            placeholder="请输入您的手机号码"
            placeholder-class="placeholderStyle"
            v-model="personTel"
          />
        </view>
      </view>
      <view class="send" @click="publish">立即发布</view>
      <view class="content1" @click="openMiniProgram">
        <image class="img" src="http://xcxtp.njmswl.com/images/index/shop.png" />
        <text class="openTitle">我也要开通小程序</text>
      </view>
      <view class="support"><text>技术支持：推量科技</text></view>
    </view>
  </scroll-view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import OpenProgram from '../components/openProgram.vue'
import { computed } from 'vue'
import { onLoad,onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
import { getRentAPI } from '@/services/rent'
const menu = ref({})
const area = ref('')
const typy = ref('')
const acceptPrice = ref('')
const personName = ref('')
const personTel = ref('')
onMounted(() => {
  menu.value = uni.getMenuButtonBoundingClientRect()
  // console.log(menu.value);
})

const goBack = () => {
  // uni.navigateBack()
  uni.switchTab({
    url: '/pages/index/index',
  })
}

const publish = async () => {
  if (!area.value) {
    uni.showToast({
      title: '请输入理想区域',
      icon: 'none',
    })
  } else if (!typy.value) {
    uni.showToast({
      title: '请输入理想户型',
      icon: 'none',
    })
  } else if (!acceptPrice.value) {
    uni.showToast({
      title: '请输入理想价格',
      icon: 'none',
    })
  } else {
    const userId = uni.getStorageSync('appIdKey')
    const res = await getRentAPI({
      id: userId,
      area: area.value,
      typy: typy.value,
      price: acceptPrice.value,
      sellType: 0,
      title:personName.value,
      phone:personTel.value
    })
    if (res.code === 0) {
      uni.showToast({
        title: '发布成功！',
        icon: 'success',
      })
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'error',
      })
    }
  }
}


// 开通小程序
const openMiniProgram = () => {
  uni.navigateTo({ url: "/pages/simplePage/openMiniProgram" });
};
</script>
<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
  background-color: #f4f5fc;
}
.navbar {
  margin-top: 8rpx;
  background-color: #fff;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 47rpx;
  .goBack {
    position: absolute;
    width: 18rpx;
    height: 30rpx;
    margin-left: 56rpx;
    margin-top: 10rpx;
  }
  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.wrapper {
  position: relative;
  height: 100%;
  background-color: #f4f5fc;

  .hireImg {
    width: 100%;
    height: 373.3rpx;
  }

  .content {
    position: absolute;
    top: 284rpx;
    margin-left: 27rpx;
    width: 694rpx;
    height: auto;
    background: #ffffff;
    border-radius: 25rpx;

    .contentItem {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      height: 109rpx;
      padding-left: 25rpx;
      padding-right: 24rpx;

      // line-height: 109rpx;
      .rightArrow {
        width: 12rpx;
        height: 21rpx;
        margin-left: auto;
      }

      .line {
        position: absolute;
        width: 646rpx;
        height: 1rpx;
        bottom: 0;
        border-bottom: 1rpx solid rgba(229, 229, 229, 0.75);
      }

      .houseNameText {
        width: 170rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }

      .inputStyle {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }

      .placeholderStyle {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #989999;
      }

      .unit {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
        margin-left: 100rpx;
      }
    }
  }

  .send {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 877rpx;
    margin-left: 27rpx;
    width: 695rpx;
    height: 100rpx;
    background: #3bc48c;
    border-radius: 50rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
  }

  .content1 {
    position: absolute;
    top: 1022rpx;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 261rpx;
    height: 61rpx;
    margin-bottom: 21rpx;
    background: #3bc48c;
    border-radius: 30rpx;

    .img {
      width: 28rpx;
      height: 26rpx;
    }

    .openTitle {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  .support {
    position: absolute;
    top: 1104rpx;
    left: 50%;
    transform: translate(-50%, 0%);
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
  }
}
</style>
